<template>
    <div class="box">
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="250px">
                <div class="topic-box">
                    <img src="../assets/images/logo.png" alt="">
                    <div class="topic">旅游管理系统</div>
                </div>

                <el-menu router :default-active="this.$route.path" class="el-menu-vertical-demo" background-color="#545C64"
                    text-color="#fff" active-text-color="#ffd04b">
<!--                  这里是超级管理员的模块-->
                    <el-submenu index="f" v-if="user.access===2">
                        <template slot="title">
                            <i class="el-icon-view"></i>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/user"> <i class="el-icon-user"></i>账号管理</el-menu-item>
                            <el-menu-item index="/sightCheck"> <i class="el-icon-s-platform"></i>景点信息管理审核</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="t" v-if="user.access===2">
                        <template slot="title">
                            <i class="el-icon-printer"></i>
                            <span>公告留言管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/noticeManagement"> <i class="el-icon-edit"></i>公告列表</el-menu-item>
                            <el-menu-item index="/commentsManagement"> <i class="el-icon-edit"></i>评论管理</el-menu-item>
                            <el-menu-item index="/messageManagement"> <i class="el-icon-edit"></i>留言管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

<!--                  接下来是景区商家模块-->
                    <el-submenu index="three" v-if="user.access===1">
                        <template slot="title">
                            <i class="el-icon-files"></i>
                            <span>景点信息管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/sightsManagement"> <i class="el-icon-caret-right"></i>景点列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="four" v-if="user.access===1">
                        <template slot="title">
                            <i class="el-icon-s-order"></i>
                            <span>门票与订单管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/ticketManagement"> <i class="el-icon-tickets"></i>门票信息</el-menu-item>
                            <el-menu-item index="/orderManagement"> <i class="el-icon-tickets"></i>订单列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

<!--                  最后是用户会员-->
                    <el-submenu index="six" v-if="user.access===0">
                        <template slot="title">
                            <i class="el-icon-s-order"></i>
                            <span>景点信息</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/sightsView"> <i class="el-icon-tickets"></i>景点信息查看</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="five" v-if="user.access===0">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>我的记录</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/myOrder"> <i class="el-icon-guide"></i>我的订单</el-menu-item>
                            <el-menu-item index="/submitMessage"> <i class="el-icon-guide"></i>我要留言</el-menu-item>
                            <el-menu-item index="/myComments"> <i class="el-icon-guide"></i>我的评论</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                  <el-submenu index="seven" v-if="user.access===0||user.access===1">
                    <template slot="title">
                      <i class="el-icon-user-solid"></i>
                      <span>公告</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="/noticeView"> <i class="el-icon-guide"></i>公告</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu>
            </el-aside>



            <el-container>
                <!-- 头 -->
                <el-header>
                    <el-dropdown>

                        <span class="el-dropdown-link">
                            {{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                      <el-badge :value="msgTotal"  class="item">
                      </el-badge>
                        <el-dropdown-menu slot="dropdown">
                          <el-badge :value="msgTotal" class="item">
<!--                          <el-dropdown-item @click.native="myMsg">消息</el-dropdown-item>-->
                          </el-badge>
                          <el-dropdown-item @click.native="myInfo">个人信息</el-dropdown-item>
                          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </el-header>
                <!-- 内容 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'Main',
    data() {
        return {
          msgTotal:'',
          user: '',
          timer:'',
        };
    },
  beforeDestroy() {
    // this.$bus.$off('changeMsgStatusMain')
    // clearInterval(this.timer);
  },
    mounted() {
        const user = JSON.parse(window.sessionStorage.getItem("user"))
        this.user = user
    },

    methods: {
      //定时器
      start(){
        // this.timer = setInterval(this.getMessageTotal, 3000); // 注意: 第一个参数为方法名的时候不要加括号;
      },

      changeMsgStatusMain(){
        // console.log("父亲收到了提示")
        this.msgTotal--
      },

      // 获取所有未读消息
      getMessageTotal(){
        this.$http.get("/message/total").then(res => {
          this.msgTotal = res.data.data
        });
        // this.$bus.$emit("getMsgList")
      },

      //去消息页面
      myMsg(){
        this.$router.push('/adminMsg')
      },
        myInfo() {
            this.$router.push('/myInfo')
        },
        logout() {
            // console.log(111)
            //退出登录就是将用户存在前端服务器的信息删除，并且将路由跳转到登录页面
            window.sessionStorage.removeItem("user")
            this.$router.push('/login')
        }
    },
};
</script>

<style lang="less" scoped>
.box {
    height: 100%;


    .el-container {
        height: 100%;

        .el-aside {
            height: 100%;
            background: #545C64;

            .topic-box {
                display: flex;
                align-items: center;

                img {
                    margin-left: 20px;
                }

                .topic {
                    margin-left: 15px;
                    color: white;
                    font-size: 18px;
                    text-align: center;
                    line-height: 60px;


                }

            }

            .el-menu {
                box-sizing: border-box;
                border: none;
            }


        }

        .el-header {

            // background-color: rgb(150, 158, 164);
            position: relative;
            // background-color: #63a8e1;
            color: #333;
            line-height: 60px;

            display: flex;
            justify-content: right;
            align-items: center;
            height: 100%;
        }

        .el-main {
            // background: #85883b;
        }
    }


}

</style>
